import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:syria_sports/core/app_export.dart';
import 'package:flutter/material.dart';
import 'package:syria_sports/data/models/auth/user.dart';
import 'package:syria_sports/presentation/players/add_player_page/widgets/my_circle_avatar.dart';

import '../../public_player_profile_page/player_profile_screen.dart';



class PublicPlayerItemView extends StatelessWidget {
  final User user;
  final int index;
  const PublicPlayerItemView({
    super.key,
    required this.user,
    required this.index,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
         Navigator.push(context, MaterialPageRoute(builder: (context) => PlayerProfileScreen.builder(context: context,user: user)));
      },
      child: Card(
        color: Theme.of(context).colorScheme.secondary,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            const SizedBox(width: 4,),
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: Text((index+1).toString(),style: CustomTextStyles.bodySmallOnPrimary32),
            ),
            MyCircleAvatar(
              padding:const EdgeInsets.all(8),
              borderColor: Colors.red,
              backgroundColor:Theme.of(context).colorScheme.onPrimaryContainer,
              editMode: false,
              imageURL:user.image,
              width: 38,
              active: null,
            ),
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(user.fullName,style: theme.textTheme.titleMedium),
                ),
                Text("مستوى: ${user.level}",style: CustomTextStyles.bodySmallOnPrimary),
              ],
            ),
            Expanded(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0,horizontal: 16),
                  child: CircularPercentIndicator(
                    radius: 28.0,  // قطر الدائرة
                    lineWidth: 4.0,  // سماكة خط المؤشر
                    percent: user.userRate / 100,  // النسبة المئوية
                    center: Text(
                      '${user.userRate.toStringAsFixed(0)}%',
                      style: theme.textTheme.labelLarge,
                    ),
                    progressColor: Colors.green,  // لون خط المؤشر
                    circularStrokeCap: CircularStrokeCap.round,  // شكل نهاية الخط
                    animation: true,  // تفعيل الرسوم المتحركة
                    animateFromLastPercent: false,  // استمرار الرسوم المتحركة من القيمة السابقة
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
